<template>
  <canvas ref="canvas" style="width: 500px"></canvas>
  <div>
    <input type="range" max="1" step="0.01" v-model="y">
  </div>
</template>

<script>
import * as PIXI from 'pixi.js'
import { Sprite2d, AFFINE } from 'pixi-projection'

const width = 500
const height = 500
function createRadialGradient(colors) {
  const w = 200
  const h = 200
  const c = document.createElement('canvas')
  c.width = w 
  c.height = h
  const ctx = c.getContext('2d')
  const grd = ctx.createRadialGradient(100, 100, 0, 100, 100, 100)
  
  ;[].concat(colors).forEach(({offset, color}) => {
    grd.addColorStop(offset, color)
  })

  ctx.fillStyle = grd
  ctx.arc(100, 100, 100, 0, Math.PI * 2)
  ctx.fill()

  return PIXI.Texture.from(c)
}

export default {
  data() {
    return {
      y: .5,
      isoScalingContainer: null
    }
  },
  watch: {
    y (val) {
      console.log(val)
      this.isoScalingContainer.scale.y = val
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const app = new PIXI.Application({
        view: this.$refs.canvas,
        width,
        height,
        antialias: true,
        resolution: window.devicePixelRatio,
        backgroundColor: 0x000000
      })
      this.isoScalingContainer = new PIXI.Container()
      this.isoScalingContainer.scale.y = this.y
      this.isoScalingContainer.position.set(250, 250)
      app.stage.addChild(this.isoScalingContainer)

      const spr = new PIXI.Sprite(createRadialGradient([
        {
          offset: 0,
          color: 'rgba(255, 255, 255, 0)'
        },
        {
          offset: .8,
          color: 'rgba(255, 255, 255, .5)'
        },
        {
          offset: 1,
          color: 'rgba(255, 255, 255, 1)'
        }
      ]))

      spr.position.set(0, 0)
      spr.anchor.set(0.5)
      spr.width = 400
      spr.height = 400

      const isometryPlane = new PIXI.Graphics()
      isometryPlane.rotation = Math.PI / 4
      isometryPlane.lineStyle(2, 0xffffff)
      isometryPlane.drawCircle(0, 0, 200)
      isometryPlane.addChild(spr)

      this.isoScalingContainer.addChild(isometryPlane)

    }
  }
}
</script>

<style>

</style>